import { singleLogout } from "@/api/login";
import { useRouter } from "@/router/hooks"
import { useSkipContainer } from "@/store/menuStore";
import { useToLogin, useUserActions } from "@/store/userStore";
import { useEffect } from "react"
const MessageClient = () => {
  const router = useRouter()
  const skipContainer = useSkipContainer()
  const { setLoginHint, logout, toSSOLogout } = useUserActions()
  const toLogin = useToLogin()

  // 来自其他窗口消息 如大屏的 需要传入每个iframe
  const ontOtherMessage = (ev) => {

    // 获取所有class为myIframe的元素
    let iframes = document.querySelectorAll('.myIframe')
    // 遍历并执行操作
    // 在这里可以对每个iframe进行操作
    iframes.forEach(function (iframe) {
      // 防止因父窗口收到消息又发回来
      if (ev.source !== iframe.contentWindow) {
        iframe.contentWindow.postMessage(ev.data, '*')
      }
    })
  }

  // 来自iframe消息
  const onIframeMessage = (event) => {
    const data = event.data || {}
    if (typeof data === 'object') {
      const { type, code, url, appId, appType, routerMethod, openMethod, openParams } = data
      if (type === 'routerTo' && url) {
        console.log('routerQuery区域内页面跳转', url)
        // routerMethod 加载方式:1嵌入 2s独立
        // openMethod 打开方式:
        // openParams window.open(url, ...openParams)
        skipContainer({
          code: code,
          url: url,
          appId: appId,
          appType: appType,
          routerMethod: routerMethod || 2,
          openMethod: openMethod || 2,
          openParams
        })
        return true
      }
      if (type === 'logout') {
        singleLogout().then((res) => {
          if (res.errorCode === '0') {
            logout()
            toSSOLogout()
          }
        })
        return
      }
    }

    if (typeof data === 'object' && [401, 403].includes(Number(data.code)) || [401, 403].includes(Number(data))) {
      setLoginHint({
        title: '登录提示',
        content: 'token失效，请重新登录',
        show: true
      })
      return
    }


    if (typeof data === 'object' && 'back' === data.code || 'back' === data) {
      router.back()
      return true
    }
  }

  // 发送消息给父窗口
  const sendOpenerMessage = (data) => {
    //已弃用 fromOpener，需要发送时配合现场代码改动太多 
    //fromOpener: 父窗口监听消息是window.addEventListener  区分不开是iframe还是opener 发送来的消息
    // window.opener && window.opener.postMessage({ data, fromOpener: '1' }, '*')
    window.opener && window.opener.postMessage(data, '*')
  }

  // 监听子窗口或者iframe发来的消息
  // 
  const receiveWindowMessage = (event) => {
    //判断事件来源是不是当前页面，是的话跳过，防止事件冲突
    if (event.source === window) return
    console.log('应用集成监听消息', event)
    // 接受到opener类型的消息不受理
    if (event.data.fromOpener) {
      // 如果没有frameElement，则可能是子窗口的消息
      // ontOtherMessage(event.data.data)
    } else {
      // 如果存在frameElement，则是iframe的消息
      // onIframeMessage(event)
      // 广播到其他窗口
      // sendOpenerMessage(event.data)
    }
    let isSeized = onIframeMessage(event)
    if (!isSeized) {
      ontOtherMessage(event)
      sendOpenerMessage(event.data)
    }
  }

  // 父级窗口 大屏来的
  const receiveOpenerMessage = (e) => {
    if (e.source === window) return
    console.log('opener窗口消息', e)
    ontOtherMessage(e)
  }


  useEffect(() => {
    window.addEventListener('message', receiveWindowMessage, false)
    if (document.referrer.includes(window.location.origin) && window.opener) {
      window.opener.addEventListener('message', receiveOpenerMessage, false)
    }

    return () => {
      window.removeEventListener('message', receiveWindowMessage)
      if (document.referrer.includes(window.location.origin) && window.opener) {
        window.opener.removeEventListener('message', receiveOpenerMessage)
      }
    }
  }, [])
}

export default MessageClient

// docs
// iframe内部window.top.postMessage 发送消息出来，子窗口通过opener.addEventListener 能收到，无关iframe是否同源
// 反之 子窗口iframe内部 发送消息出来, 父窗口是不能送到的，需要opener.postMessage转发